<template>
    <div class="user">
        <Sign />
        
        <h1 @click="inforState = !inforState" :class="{active:inforState}">个人信息修改</h1>
        <ul class="user-infor" v-show="inforState">
            <li>
                <span>姓名</span>
                <input type="text" v-show="!status" v-model="user.name">
                <em v-show="status">{{user.name}}</em>
                <a v-if="status" class="edit" @click="status = false">修改</a>
                <a v-else class="keep" @click="updateUserInfor">保存</a>
            </li>
            <li>
                <span>手机号</span>
                <input type="text" v-show="!status" v-model="user.tellphone">

                <em v-show="status">{{user.tellphone}}</em>
                <a v-if="status" class="edit" @click="status = false">修改</a>
                <a v-else class="keep" @click="updateUserInfor">保存</a>
            </li>
            <li>
                <span>生日</span>
                <input type="text" v-show="!status" v-model="user.birthday">

                <em v-show="status">{{user.birthday}}</em>
                <a v-if="status" class="edit" @click="status = false">修改</a>
                <a v-else class="keep" @click="updateUserInfor">保存</a>
            </li>
        </ul>
    </div>
</template>

<script>
    import Sign from '../components/Sign.vue'
    export default {
        name: 'HelloWorld',
        components: {
            Sign
        },
        props: {
            msg: String
        },
        data() {
            return {
                user: {
                    name: "winfy",
                    tellphone: "13112345678",
                    birthday: "20191010"
                },
                status: true,
                inforState: false
            }
        },
        methods: {
            updateUserInfor() {
                this.status = true;
                console.log("修改信息成功");

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .user {
        width: 100%;
        box-sizing: border-box;
        padding: 0.2rem 0.3rem;
        box-sizing: border-box;
    }

    .user h1 {
        font-size: 0.3rem;
        height: 0.5rem;
        line-height: 0.5rem;
    }

    .user h1::after {
        content: '';
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        vertical-align: middle;
        background: url("../assets/icon/nav.png") no-repeat;
        background-size: 80% 80%;
        margin-left: 0.2rem;
        /* transform:rotateZ(90deg); */
    }

    .user h1.active::after {
        transform: rotateZ(90deg);
    }

    .user .user-infor {
        width: 100%;
        font-size: 0.24rem;
    }

    .user .user-infor li {
        padding: 0.1rem 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        display: flex;
        color: #424242;
    }

    .user .user-infor li span {
        width: 20%;
    }

    .user .user-infor li em,
    .user .user-infor li input {
        width: 60%;
        margin-right: 0.5rem;
    }

    .user .user-infor li input {
        box-sizing: border-box;
        padding-left: 0.3rem;
        height: 0.4rem;
        /* vertical-align: middle; */
        line-height: 0.55rem;
        outline: none;
        background: #fff;
        border: 1px solid #666;
    }

    .user .user-infor li a.edit {
        color: #999;
    }

    .user .user-infor li a.keep {
        background: rgb(131, 217, 68);
        color: #fff;
        padding: 0 0.1rem;
        font-size: 0.22rem;
        border-radius: 0.15rem;
    }
</style>